<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="2-4" open-index="2"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is staff page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.word" placeholder="请输入车辆编号或所属线路编号/名称）（支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button @click="drawer = true; getline()" type="primary" style="margin-left: 16px;">添加</el-button>
          <el-drawer
            title="新增车辆" size="300px"
            :visible.sync="drawer"
            :direction="direction"
            ref="thisdrawer">
            <!--            :before-close="handleClose"-->

            <el-row :gutter="20" style="margin-bottom: 12px">
              <el-col :span="20" :offset="2" >归属线路</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 30px">
              <el-col :span="20" :offset="2">
                <el-select v-model="newtraininfo.line_id" placeholder="请选择线路">
                  <el-option
                    v-for="item in data_line"
                    :key="item.line_name"
                    :value="item.line_id"
                    :label="item.line_name">
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.line_id }}</span>
                    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.line_name }}</span>
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 12px">
              <el-col :span="20" :offset="2">车辆类型</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 30px">
              <el-col :span="20" :offset="2">
                <el-select v-model="newtraininfo.train_type" placeholder="请选择车辆类型">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :value="item.label"
                    :label="item.label">
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10" :offset="6">
                <el-button type="primary" style="width: 130%" @click="newtrain()">确认提交</el-button></el-col>
            </el-row>
          </el-drawer>
        </el-container>
        <!--车辆列表-->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          @selection-change="handleSelectionChange"
          height="502"
          style="width: 100%; margin-top: 20px">

          <el-table-column
            prop="train_id"
            label="车辆编号"
            width="200px">
          </el-table-column>
          <el-table-column
            prop="train_type"
            label="车辆类型" >
          </el-table-column>
          <el-table-column
            prop="line_id"
            label="归属线路编号">
          </el-table-column>
          <el-table-column
            prop="line_name"
            label="归属线路名称">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button icon="el-icon-delete" circle size="small"
                         @click="handleDelete(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      words: {
        word: ''
      },
      data_line: [{"line_id":'',"line_name":''}],
      options: [{value: '1', label: 'A型'},
                {value: '2', label: 'B型'},
                {value: '3', label: 'As型'},
                {value: '4', label: 'AH型'},
                {value: '5', label: 'LB型'}],
      drawer: false,
      drawer2: false,
      direction: 'rtl',

      newtraininfo: {
        line_id: '', train_type: ''
      },
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/train/init`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length;
    });
  },
  methods: {
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    }, async getline(){
      this.$axios.get(`http://127.0.0.1:5000/train/item_line`).then((res) => {
        console.log(res);
        this.data_line = res.data;
      });
    }, async vague() {
      this.$axios.post(`http://127.0.0.1:5000/train/select`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.tableData = res.data;
          this.total = this.tableData.length;
        }
      });
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onDelete(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async onDelete(row) {
      this.$axios.post(`http://127.0.0.1:5000/train/delete`, row.train_id).then((res) => {
        console.log(res.data);
        this.st = res.data;
        if (this.st==1){
          this.$message('删除成功');
          window.location.reload();}
        else{
          this.$message('删除失败');
        }

        this.st = 2;
      });
    },
    async newtrain() {
      if (this.newtraininfo.line_id=='')
        this.$message('请选择线路');
      else if(this.newtraininfo.train_type=='')
        this.$message('请选择车辆类型');
      else
        this.$axios.post(`http://127.0.0.1:5000/train/newtrain`, this.newtraininfo).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st==1) {
            this.$message('新增成功');
            this.$refs.thisdrawer.closeDrawer();
            window.location.reload();
          }
          else {
            this.$message('新增失败，工号已存在！');
            this.$refs.thisdrawer.closeDrawer();
          }
          this.st=2;
        });
    }
  }
}
</script>

<style>

.menu{
  width: 100%;
  float: left;
  height: 700px;
}


</style>
